<template>
  <el-drawer v-model="open" :size="'100%'" title="预览" :with-header="false">
    <zz-Label :text="'预览'" class="label-cls"></zz-Label>
    <el-tabs v-model="tab" @tab-click="clickTab">
      <el-tab-pane
        v-for="(value, key) in previewData"
        :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
        :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
        :key="key"
      >
        <div style="position: relative">
          <el-button class="copy-button" size="small" @click="copyCode(value)"
            >复制</el-button
          >
          <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
        </div>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div class="drawer-footer">
        <el-button size="default" @click="close">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup>
import hljs from "highlight.js/lib/core";
import "highlight.js/styles/github.css";
import javascript from "highlight.js/lib/languages/javascript";
import java from "highlight.js/lib/languages/java";
import xml from "highlight.js/lib/languages/xml";
import sql from "highlight.js/lib/languages/sql";
hljs.registerLanguage("javascript", javascript);
hljs.registerLanguage("java", java);
hljs.registerLanguage("xml", xml);
hljs.registerLanguage("html", xml);
hljs.registerLanguage("vue", xml);
hljs.registerLanguage("sql", sql);
import { computed, watch, ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue", "query"]);
const open = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

watch(
  open,
  (newValue, oldValue) => {
    if (newValue) {
      init();
    }
  },
  { immediate: true }
);

const init = () => {
  console.log(previewData);
};

const tab = ref("dto.java");
const clickTab = () => {};

const previewData = ref({});

// 高亮代码
const highlightedCode = (code, key) => {
  const vmName = key.substring(key.lastIndexOf("/") + 1, key.indexOf(".vm"));
  var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
  const result = hljs.highlight(code || "", {
    language: language,
    ignoreIllegals: true,
  });

  return result.value || "&nbsp;";
};

// 将代码复制到剪贴板
const copyCode = (val) => {
  let res = proxy.$TOOL.copy(val);
  if (res) {
    ElMessage.success("代码已复制至剪贴板");
  }
};

const close = () => {
  open.value = false;
};

defineExpose({ previewData });
</script>
<style lang="less" scoped>
.copy-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  cursor: pointer;
}

:deep(.ivu-tabs-content-animated) {
  height: calc(100vh - 155px);
}

.drawer-header {
  // display: flex;
  // justify-content: flex-end;
  padding: 10px;
  // border-top: 1px solid var(--el-border-color);
  // margin: 0 -20px -20px -20px;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  border-top: 1px solid var(--el-border-color);
  margin: 0 -20px -20px -20px;
}
</style>
